<template>
    <div class="business-modal">
	    <Modal
	        v-model="modal"
	        title="普通的Modal对话框标题"
	        @on-ok="ok"
	        @on-cancel="cancel">

	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
				<FormItem label="选择期数：" prop="name">
					<Row>
						<Col span="24">
				            <RadioGroup v-model="num" type="button" size="large">
				                <Radio label="不分期" value="0"></Radio>
				                <Radio label="2期" value="2"></Radio>
				                <Radio label="3期"  value="3"></Radio>
				                <Radio label="6期"  value="6"></Radio>
				                <Radio label="9期"  value="9"></Radio>
				                <Radio label="12期"  value="12"></Radio>
				                <Radio label="15期"  value="15"></Radio>
				                <Radio label="18期"  value="18"></Radio>
				                <Radio label="24期"  value="24"></Radio>
				                <Radio label="36期"  value="36"></Radio>
				                <Radio label="所有期数"  value=""></Radio>
				            </RadioGroup>							
						</Col>
					</Row>
				</FormItem>

				<FormItem label="优惠订单部分期数：">
					<Row>
						<Col span="24">
							<span class="ivu-switch ivu-switch-large">
								<input type="hidden" value="false"> 
								<span class="ivu-switch-inner">
									<span>关闭</span>
								</span>
							</span>		
						</Col>
					</Row>
				</FormItem>	

				<FormItem label="订单：" prop="name">
					<Row>
			            <Col span="6">
						   <Select v-model="model1">
						        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
						    </Select>    		
			        	</Col>
			        	<Col span="1">&nbsp;</Col>
			            <Col span="6">
		                    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>	
			        	</Col>					
					</Row>
				</FormItem>				
	        </Form>	
<!-- 
	        <Row>
	        	<Col span="24">
		            <RadioGroup v-model="num" type="button" size="large">
		                <Radio label="不分期" value="0"></Radio>
		                <Radio label="2期" value="2"></Radio>
		                <Radio label="3期"  value="3"></Radio>
		                <Radio label="6期"  value="6"></Radio>
		                <Radio label="9期"  value="9"></Radio>
		                <Radio label="12期"  value="12"></Radio>
		                <Radio label="15期"  value="15"></Radio>
		                <Radio label="18期"  value="18"></Radio>
		                <Radio label="24期"  value="24"></Radio>
		                <Radio label="36期"  value="36"></Radio>
		                <Radio label="所有期数"  value=""></Radio>
		            </RadioGroup>	        		
	        	</Col>
	        </Row>
	        <Row>
	        	<Col span="8">优惠订单部分期数</Col>
	            <Col span="16">
					<Switch size="large">
						<span slot="open">开启</span>
						<span slot="close">关闭</span>
					</Switch>       		
	        	</Col>
	        </Row>
	        <Row>
	        	<Col span="4">订单</Col>
	            <Col span="4">
				   <Select v-model="model1">
				        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
				    </Select>    		
	        	</Col>
	            <Col span="4">
                    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>	
	        	</Col>
	        </Row> -->
	    </Modal>       
    </div>
</template>

<script>
    export default {
    	props:{
          modal:Boolean
    	},
        data(){
           return {
           	    num:0,
           	    value1:2,
				cityList: [
				{
				value: 'beijing',
				label: '北京市'
				},
				{
				value: 'shanghai',
				label: '上海市'
				},
				{
				value: 'shenzhen',
				label: '深圳市'
				},
				{
				value: 'hangzhou',
				label: '杭州市'
				},
				{
				value: 'nanjing',
				label: '南京市'
				},
				{
				value: 'chongqing',
				label: '重庆市'
				}
				],
				model1: ''
           };
        },
        methods:{
        	ok(){

        	},
        	cancel(){

        	}
        }
    }
</script>

<style scoped>


   .ivu-radio-group-button .ivu-radio-wrapper{
        border-radius: 4px;
        margin:10px;
        border-left: 0;
        border: 1px solid #dddee1;
	    width: 80px;
	    text-align: center
   }

    .ivu-radio-group-button .ivu-radio-wrapper-checked{
        box-shadow: 0 0 0 0;
        border-color: #2d8cf0; 
    }
</style>